<template>
	<div class="stratop">

		<div>
			<!-- <h1>物料总库存数：<label style="color: red;" > 56524</label></h1> -->
			<dv-digital-flop :config="config" style='height: 100px;margin-top: -30px;' />
		</div>
		<div class="topTitle" style="margin-top: -30px;">
			<svg-icon icon-class="alarun" style="color:#5cd9e8; "></svg-icon>
			<span class="fs-xl text mx-2">立体库库位详情</span>
		</div>
		<div id="location" style="height:70%;"></div>

		<div>
			<!-- <h1>物料总库存数：<label style="color: red;" > 56524</label></h1> -->
			<dv-digital-flop :config="locate" style='height: 100px;margin-top: -30px;' />
		</div>

	</div>
</template>

<script>
	const echarts = require("echarts");
	import api from "@/http/api";
	export default {
		data() {
			return {
				chart: null,
				item: "",
				interval: "10000",
				option: "",
				type: 0,
				config: {
					number: [0,0],
					content: '物料总库存数：{nt}件  重量：{nt}KG'
				},
				locate: {
				    number: [0,0],
					content: '库内总库位：{nt}	  已使用：{nt}'
				},
			};
		},
		mounted() {
			this.chart = echarts.init(document.getElementById("location"));
			this.option = {
				// title: {
				// 	text: "",
				// 	x: "center",
				// 	y: 0,
				// 	textStyle: {
				// 		color: "#B4B4B4",
				// 		fontSize: 8,
				// 		fontWeight: "normal"
				// 	}
				// },
				tooltip: {
					trigger: "axis",
					backgroundColor: "rgba(255,255,255,0.1)",
					axisPointer: {
						type: "cross",
						crossStyle: {
							color: '#999'
						}
						// label: {
						// 	show: true,
						// 	backgroundColor: "#7B7DDC"
						// }
					}
				},
				legend: {
					textStyle: {
						color: "#FFFFFF"
					},
					x: 'center',
					y: 'bottom',
					data: ['分类总库位', '已用库位', '已用百分比']

				},
				// grid: {
				// 	x: "5%",
				// 	width: "90%",
				// 	y: "4%"
				// },
				xAxis: [{
					type: 'category',
					data: ['刀量具小区', '刀量具中区', '半成品小区', '半成品中区', '半成品大区'],
					//data: [],
					axisLine: {
						lineStyle: {
							color: "#B4B4B4"
						}
					},
					// axisTick: {
					// 	show: false
					// },
					axisPointer: {
						type: 'shadow'
					}

				}],
				yAxis: [{
						type: 'value',
						name: '数量',
						// min: 0,
						// max: 1500,
						// interval: 150,
						splitLine: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: "#B4B4B4"
							}
						},
						axisLabel: {
							formatter: "{value}"
						}
					},
					{
						type: 'value',
						name: '已用百分比',
						splitLine: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: "#B4B4B4"
							}
						},
						axisLabel: {
							formatter: "{value}%"
						}
					}
				],
				series: [{
						name: '分类总库位',
						type: "bar",
						data: [],

						// barWidth: 10,
						// itemStyle: {
						// 	normal: {
						// 		opacity: 1,
						// 		barBorderRadius: 5,
						// 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						// 				offset: 0,
						// 				color: "#5e69ff"
						// 			},
						// 			{
						// 				offset: 1,
						// 				color: "#ffa4f3"
						// 			}
						// 		])
						// 	}
						// },
						// yAxisIndex: 0,

						// label:{
						// 	style: {
						// 	  fontSize: 10
						// 	}
						// }
					},
					{
						type: "bar",
						name: '已用库位',
						// barWidth: 10,
						// itemStyle: {
						// 	normal: {
						// 		opacity: 1,
						// 		barBorderRadius: 5,
						// 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						// 				offset: 0,
						// 				color: "#5e69ff"
						// 			},
						// 			{
						// 				offset: 1,
						// 				color: "#ffa4f3"
						// 			}
						// 		])
						// 	}
						// },
						yAxisIndex: 0,
						data: [],
						// label:{
						// 	style: {
						// 	  fontSize: 10
						// 	}
						// }
					},
					{
						type: "line",
						name: '已用百分比',
						yAxisIndex: 1,
						data: [],

						// itemStyle: {
						// 	normal: {
						// 		opacity: 1,
						// 		barBorderRadius: 5,
						// 		color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						// 				offset: 0,
						// 				color: "#5e69ff"
						// 			},
						// 			{
						// 				offset: 1,
						// 				color: "#ffa4f3"
						// 			}
						// 		])
						// 	}
						// },
						// label:{
						// 	style: {
						// 	  fontSize: 10
						// 	}
						// }
					},
				]
			};
			this.chart.setOption(this.option, true);
			// var category = [];
			// var data = []
			//	this.draw(category, data);
			//setInterval(this.changeColor, 1000);
			this.fetchData();
		},
		methods: {
			fetchData() {
				this.$http.get('/API/getLocationUse', )
					.then(response => {
						if (response.data.code == 0) {
							let alarm = "";
							alarm = response.data.data.location;

							let kdata = [],
								v1data = [],
								v2data = [],
								v3data = [];
							alarm.forEach((item) => {

								let zonename = item.zonename;
								// let zonenametmp =zonename.split('').join('\n')
								// let zonenametmp ='';
								// if( zonename && zonename.length>3 ){
								// 	zonenametmp =zonename.slice(0, 3) + '\n' + zonename.slice(3);
								// }else{
								// 	zonenametmp = zonename;
								// }

								// kdata.push(zonenametmp)
								kdata.push(zonename)

								let total = item.total;
								let used = item.used;
								v1data.push(total);
								v2data.push(used);
								var data3 = (used * 100 / total).toFixed(2);
								v3data.push(data3.toString());

							})

							let skuSum = response.data.data.skuSum;
							let weigth = response.data.data.weigth;
							// this.config.data[0] = skuSum;
							this.config = {
								number:[skuSum,weigth],
								content: '物料总库存数：{nt}件  重量：{nt}KG'
							}
							let locationCount = response.data.data.locateCount;
							let locationSY = response.data.data.locateSY;
							this.locate = {
							    number: [locationCount,locationSY],
                                content: '库内总库位：{nt}	  已使用：{nt}'
							}
							// this.item = response.itemSingle;
							// let kdata = [],
							// 	vdata = [];
							// kdata = Object.keys(this.item);
							// vdata = Object.values(this.item);
							if (document.getElementById("location")) {
								this.draw(kdata, v1data, v2data, v3data);
								//this.initChart();
								setTimeout(this.fetchData, this.interval);
							}

						}
					}).catch(err => {
						if (document.getElementById("location")) {
							setTimeout(this.fetchData, this.interval);
						}
					})
			},

			draw(category, data1, data2, data3) {
				//data3 = data3.toFixed(2);
				// 基于准备好的dom，初始化echarts实例
				this.option.xAxis[0].data = category;
				this.option.series[0].data = data1;
				this.option.series[1].data = data2;

				//var data4 =(data3.toString())+"%";
				this.option.series[2].data = data3;
				this.chart.setOption(this.option, true);

			},
			changeColor() {
				switch (this.type) {
					case 0:
						this.option.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: "#5e69ff"
						}, {
							offset: 1,
							color: "#ffa4f3"
						}])
						break;
					case 1:
						this.option.series[0].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: "#1911ff"
						}, {
							offset: 1,
							color: "#e653ff"
						}])
						break
				}
				this.type = 1 - this.type;
				this.chart.setOption(this.option, true);
			}
		},
		// mounted() {
		// 	this.fetchData()
		// },

		destroyed() {
			window.onresize = null;
		}
	};
</script>

<style lang="scss" scoped>
	.stratop {
		display: flex;
		flex-direction: column;
		height: 100%;
		text-align: center;

		.topTitle {
			height: 10%;
			padding: 10px;

		}

		#bottomLeftChart {
			flex: 2;
		}
	}
</style>
